import { useState, useEffect } from 'react'

import HeartIcon from '@/assets/ThreeAceWin/heart.svg'
import SpadeIcon from '@/assets/ThreeAceWin/spade.svg'
import ClubIcon from '@/assets/ThreeAceWin/club.svg'
import DiamondIcon from '@/assets/ThreeAceWin/diamond.svg'

import './index1.less'

type PropsType = {
  pocker: PockerType | undefined,
  isPlayer: boolean,
  onClick?: () => void,
  isCommonPocker?: boolean,
  isOpened?: boolean
}

const PockerItem = (props: PropsType) => {

  const {
    pocker: {
      suit,
      number,
      isSeen,
    } = {
      suit: 'heart',
      number: '',
      isSeen: false
    },
    isPlayer = false,
    onClick = () => { },
    isCommonPocker = false,
    isOpened = false
  } = props

  const computedSuitIcon = (suit: SuitType) => {
    switch (suit) {
      case 'heart':
        return HeartIcon
      case 'spade':
        return SpadeIcon
      case 'club':
        return ClubIcon
      case 'diamond':
        return DiamondIcon
    }
  }

  return <div className={`pocker-card pocker-${suit}${isSeen ? ' is-seen' : ''}${isCommonPocker ? ' is-common': ''}${isOpened ? ' is-opened' : ''}`} onClick={onClick}>
    <div className='pocker-corner left-top'>
      <img className='pocker-corner-icon' src={computedSuitIcon(suit)} />
      <span className='pocker-number'>{number}</span>
    </div>
    <div className='pocker-center'>
      <img className='pocker-center-top-icon' src={computedSuitIcon(suit)} />
      <img className='pocker-center-bottom-icon' src={computedSuitIcon(suit)} />
    </div>
    <div className='pocker-corner right-bottom'>
      <img className='pocker-corner-icon' src={computedSuitIcon(suit)} />
      <span className='pocker-number'>{number}</span>
    </div>
  </div>
}

export default PockerItem
